<template>
	<view>
		<view @tap="mask1Cancel" :class="'mask ' + (mask1Hidden ? '' : 'maskactive')">
			<!--顶部的导航筛选-->
			<view class="maskbody">
				<view class="navbarlist">
					<view @tap="selectednavbar" :class="'toatal_head  ' + (selectedindex == index ? 'selsect' : 'default')"
						:data-index="index" :id="'a' + index" :style="'color:' + (selectedindex == index ? color : '')"
						v-for="(item, index) in navbar" :key="index">
						{{ item.name }}
					</view>
					<view @tap="onOverallTag" class="downpng1">
						<image :class="mask1Hidden ? 'sortimg' : 'sortimg1'"
							src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down1.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!--顶部筛选-->
		<view class="sjinfonav" v-if="mask1Hidden && store_id == null">
			<scroll-view class="nav-two" :scrollIntoView="toView" :scrollX="true">
				<view @tap="selectednavbar" :class="'toatal_head  ' + (selectedindex == index ? 'selsect' : 'default')"
					:data-index="index" :id="'a' + index" :style="'color:' + (selectedindex == index ? color : '')"
					v-for="(item, index) in navbar" :key="index">
					{{ item.name }}

					<view class="toatal_text" :style="'background-color: ' + color" v-if="selectedindex == index"></view>
				</view>
			</scroll-view>
			<view @tap="onOverallTag" class="downpng">
				<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down1.png"></image>
			</view>
		</view>
		<view class="nav ba_f mar_t">
			<swiper autoplay="auto" :circular="true" class="swiper" duration="500" :indicatorActiveColor="color"
				indicatorColor="#f7f7f7" :indicatorDots="false" interval="5000" style="height: 80rpx">
				<swiper-item style="display: flex">
					<view :data-index="index" :id="'a' + index" @tap="selectednavbar"
						:class="['dis_in nav_li', selectedindex == index ? 'all' : '']" v-for="(item, index) in navbar"
						:key="index">
						<view class="t_c fon_28 gobyndsingle text-center">{{ item.name }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="no-data-tip zwdd" v-if="order_list.length == 0 && mygd">
			<image mode="aspectFit" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/list.png"></image>
			<view>暂无相关数据~</view>
		</view>
		<view :class="store_id == null ? 'qgmain' : ''">
			<navigator class="qgcell flex-row" :url="'xsqgxq?id=' + oitem.id" v-for="(oitem, index) in order_list"
				:key="index">
				<view class="qgleft flex-grow-0 flex-y-center">
					<!-- <view class="discount" :style="'background: ' + color">{{ oitem.discount }}折</view> -->
					<image mode="aspectFit" :src="oitem.logo"></image>
				</view>

				<view class="qgright flex-grow-1 flex-col">
					<view class="name gobyndsingle">{{ oitem.name }}</view>
					<view class="address gobyndsingle">{{ oitem.store_name }}</view>
					<view class="flex-bet flex-y-center" :style="'margin-bottom: 10rpx;color:' + color">
						<view class="xlfs" :style="'border-color: ' + color">限量{{ oitem.number }}份</view>
					</view>

					<view class="bfb">
						<view class="qgbfb1" :style="'border-color:' + color"></view>
						<view class="qgbfb2" :style="'width: ' + oitem.yqnum + '%'" v-if="oitem.yqnum != '0.0'"></view>
						<view class="qgtext" style="margin-left: 10rpx;">已抢{{ oitem.yqnum }}%</view>
					</view>
					<!-- <view class="flex-bet flex-y-center">
						<view class="money" :style="'color:' + color">
							￥{{ oitem.money }}
							<text>￥{{ oitem.price }}</text>
						</view>
						<view :style="'font-size:9pt;margin-right:30rpx;color:' + color">剩{{ oitem.surplus }}份</view>
					</view> -->
					<view class="flex-bet flex-y-center">
						<view class="money">
							<view>
								￥<text>{{ oitem.money }}</text> 
							</view>
							<text class="price">￥{{ oitem.price }}</text>
						</view>
						<view class="">
							<view :style="'font-size:9pt;text-align:center;color:' + color">剩{{ oitem.surplus }}份</view>
							<view class="msq" style="background:#FE544E" v-if="oitem.surplus > 0">马上抢</view>
							<view class="msq" style="background: #d5d5d5" v-else>抢光了</view>
						</view>
					</view>
				</view>
			</navigator>
			<view class="jzz" v-if="!mygd">
				<image class="Rotation" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/jzz.png"></image>
				<view>加载中...</view>
			</view>
			<view class="jzwb" v-if="mygd">
				<view class="hx"></view>
				<view class="wz">加载完毕</view>
				<view class="hx"></view>
			</view>
		</view>

	</view>
</template>

<script>
	import cardlist from '@/ymq_canyino2o/dist/cardlist/index';
	import gettel from '@/ymq_canyino2o/dist/gettel/index';
	var app = getApp();
	export default {
		components: {
			cardlist,
			gettel
		},
		data() {
			return {
				navbar: [{
					name: '全部',
					id: ''
				}],

				selectedindex: 0,
				mask1Hidden: true,
				img: 'http://img1.imgtn.bdimg.com/it/u=4078366710,4168441355&fm=200&gp=0.jpg',
				status: 1,
				pagenum: 1,
				order_list: [],
				storelist: [],
				mygd: false,
				jzgd: true,
				store_id: '',
				toView: '',
				color: '',

				oitem: {
					id: '',
					discount: '',
					logo: '',
					name: '',
					store_name: '',
					number: '',
					price: '',
					surplus: '',
					yqnum: ''
				}
			};
		},
		onLoad: function(t) {
			app.globalData.setNavigationBarColor(this);
			var that = this;
			var a = t.storeid;
			console.log(a);
			that.setData({
				store_id: a
			});
			app.globalData.util.request({
				url: 'entry/wxapp/QgType',
				cachetime: '0',
				success: function(t) {
					var a = that.navbar.concat(t.data);
					console.log('11111111111', t, a);
					that.setData({
						navbar: a
					});
				}
			});
			this.reLoad();
		},
		onReady: function() {},
		onShow: function() {},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {},
		onReachBottom: function() {
			console.log('上拉加载', this.pagenum);
			if (!this.mygd && this.jzgd) {
				this.setData({
					jzgd: false
				});
				this.reLoad();
			}
		},
		methods: {
			onOverallTag: function(t) {
				console.log(t);
				this.setData({
					mask1Hidden: false
				});
			},

			mask1Cancel: function() {
				this.setData({
					mask1Hidden: true
				});
			},

			selectednavbar: function(t) {
				console.log(t);
				this.setData({
					pagenum: 1,
					order_list: [],
					storelist: [],
					mygd: false,
					jzgd: true,
					selectedindex: t.currentTarget.dataset.index,
					toView: 'a' + (t.currentTarget.dataset.index - 1),
					status: Number(t.currentTarget.dataset.index) + 1
				});
				this.reLoad();
			},

			reLoad: function() {
				var t;
				var that = this;
				var a = this.status || 1;
				var e = this.store_id || '';
				var s = null == this.store_id ? 1 : '';
				var o = this.pagenum;
				if (1 == a) {
					t = '';
				} else {
					t = that.navbar[a - 1].id;
				}
				console.log(a, t, e, o);
				app.globalData.util.request({
					url: 'entry/wxapp/QgGoods',
					cachetime: '0',
					data: {
						type_id: t,
						store_id: e,
						page: o,
						pagesize: 10,
						type: s
					},
					success: function(t) {
						console.log('分页返回的列表数据', t.data);
						for (var a = 0; a < t.data.length; a++) {
							t.data[a].discount = ((Number(t.data[a].money) / Number(t.data[a].price)) * 10).toFixed(1);
							t.data[a].yqnum = (((Number(t.data[a].number) - Number(t.data[a].surplus)) / Number(t.data[a]
								.number)) * 100).toFixed(1);
						}
						if (t.data.length < 10) {
							that.setData({
								mygd: true,
								jzgd: true
							});
						} else {
							that.setData({
								jzgd: true,
								pagenum: that.pagenum + 1
							});
						}
						var e = that.storelist;
						e = (function(t) {
							for (var a = [], e = 0; e < t.length; e++) {
								if (-1 == a.indexOf(t[e])) {
									a.push(t[e]);
								}
							}
							return a;
						})((e = e.concat(t.data)));
						that.setData({
							order_list: e,
							storelist: e
						});
						console.log(e);
					}
				});
			}
		}
	};
</script>
<style>
	@import './xsqg.css';
</style>